import {PageContainer} from "@ant-design/pro-layout";
import ProCard, {StatisticCard} from "@ant-design/pro-card";
import {useRef, useState} from 'react';
import  {ProFormRadio} from "@ant-design/pro-form";
import {Form, Image, Select, Tag} from 'antd';
import {CheckOutlined, CloseOutlined} from '@ant-design/icons';
import ProTable, {ActionType} from '@ant-design/pro-table';
import {getTotalPrice, getUserExtract} from "@/services/ant-design-pro/FinancialOperation";
import EditMoudal from "@/pages/Financial/financialOperations/withdrawalApplication/components/EditMoudal";
import Search from "antd/es/input/Search";

const Withdraw = () => {
	const [isShowEdit, setIsShowEdit] = useState(false)
	const [cardData, setData] = useState({})
	const [timeSearch, setTimeSearch] = useState({})  // 时间选择搜索状态
	const [withdrawalSearch, setWithdrawalSearch] = useState({})  // 提现状态搜索方式
	const [withdrawalMethodSearch, setWithdrawalMethodSearch] = useState({}) // 提现方式搜索方式
	const [inputSearch, setInputSearch] = useState({}) // 提现方式搜索方式
	const [custom, setCustom] = useState({}) // 自定义搜索前置装换
	const [editData, setEditData] = useState({}) // 编辑数据
	const actionRef = useRef<ActionType>();  // 搜索状态更新
	const {Option} = Select;
	const selectBefore = (
		<Select
			defaultValue="全部"
			className="select-before"
			onChange={(values) => {
				setCustom(values)
			}}
		>
			<Option value="">全部</Option>
			<Option value="wechat_name">微信昵称</Option>
			<Option value="real_name">姓名</Option>
			<Option value="alipay_code">支付宝账号</Option>
			<Option value="bank_code">银行卡账号</Option>
		</Select>
	);

	const columns = [
		{
			title: 'ID',
			dataIndex: 'id',
			align: 'center'
		},
		{
			title: '用户信息',
			dataIndex: 'real_name',
			align: 'center',
			render: (_, rouder) => {
				return (
					<div style={{textAlign: 'left', paddingLeft: '20px'}}>
						<div>用户昵称: {rouder.real_name}</div>
						<div>用户ID: {rouder.user_id}</div>
					</div>
				)
			}
		},
		{
			title: '提现金额',
			dataIndex: 'extract_price',
			align: 'center'
		},
		{
			title: '提现方式',
			dataIndex: 'extract_typec',
			align: 'center',
			render: (_, rouder) => {
				return (
					<div style={{textAlign: 'left', paddingLeft: '20px'}}>
						<div>昵称: {rouder.real_name}</div>
						<div>微信号: {rouder.wechat_code}</div>
					</div>
				)
			}
		},
		{
			title: '收款码',
			align: 'center',
			render: (_, rouder) => {

				return (
					<Image
						width={50}
						src={rouder.qrcode_url}
					/>
				)
			}
		},
		{
			title: '添加时间',
			dataIndex: 'created_at',
			align: 'center',
		},
		{
			title: '备注',
			dataIndex: 'remarks',
			align: 'center',
		},
		{
			title: '审核状态',
			align: 'center',
			render: (_, rouder) => [
				<>
					<div>{rouder.status_type}</div>
					<div style={{display: 'flex'}}>
						{rouder.status_type == "申请中" ?
							<>
								<Tag icon={<CloseOutlined/>} color="#FF0000">
									无效
								</Tag>
								<Tag icon={<CheckOutlined/>} color="#55acee">
									通过
								</Tag>
							</>
							: null
						}
					</div>
				</>
			],
		},
		{
			title: '操作',
			dataIndex: 'memo',
			width: 100,
			fixed: 'right',
			align: 'center',
			render: (_, record) => [
				<a onClick={() => {
					setIsShowEdit(true)
					setEditData(record)
				}}>
					编辑
				</a>
			],
		},
	];

	return (
		<PageContainer header={{}}>
			<ProCard>
				<Form
					onValuesChange={(value) => {
						console.log(value);
						switch (value.timeButton) {
							case "1" :
								setTimeSearch({
									...timeSearch,
									time: undefined
								})
								break
							case  "2" :
								setTimeSearch({
									...timeSearch,
									time: "today"
								})
								break
							case  "3" :
								setTimeSearch({
									...timeSearch,
									time: "yesterday"
								})
								break
							case  "4" :
								setTimeSearch({
									...timeSearch,
									time: "week"
								})
								break
							case  "5" :
								setTimeSearch({
									...timeSearch,
									time: "quarter"
								})
								break
							case  "6" :
								setTimeSearch({
									...timeSearch,
									time: "month"
								})
								break
							case  "7" :
								setTimeSearch({
									...timeSearch,
									time: "year"
								})
								break
						}
						switch (value.statusButton) {
							case "1" :
								setWithdrawalSearch({
									...withdrawalSearch,
									status: undefined
								})
								break
							case  "2" :
								setWithdrawalSearch({
									...withdrawalSearch,
									status: "fail"
								})
								break
							case  "3" :
								setWithdrawalSearch({
									...withdrawalSearch,
									status: "underreview"
								})
								break
							case  "4" :
								setWithdrawalSearch({
									...withdrawalSearch,
									status: "withdrawncash"
								})
								break
						}
						switch (value.WithdrawalButton) {
							case "1" :
								setWithdrawalMethodSearch({
									...withdrawalMethodSearch,
									extract_type: undefined
								})
								break
							case  "2" :
								setWithdrawalMethodSearch({
									...withdrawalMethodSearch,
									extract_type: "alipay"
								})
								break
							case  "3" :
								setWithdrawalMethodSearch({
									...withdrawalMethodSearch,
									extract_type: "bank"
								})
								break
							case  "4" :
								setWithdrawalMethodSearch({
									...withdrawalMethodSearch,
									extract_type: "wechat"
								})
								break
						}
						actionRef.current?.reload();
					}}
				>
					<ProFormRadio.Group
						name="timeButton"
						label="时间选择"
						radioType="button"
						initialValue="1"
						options={[
							{
								label: '全部',
								value: '1',
							},
							{
								label: '昨天',
								value: '2',
							},
							{
								label: '今天',
								value: '3',
							},
							{
								label: '本周',
								value: '4',
							},
							{
								label: '本月',
								value: '5',
							},
							{
								label: '本季度',
								value: '6',
							},
							{
								label: '本年',
								value: '7',
							},
						]}
					/>
					<ProFormRadio.Group
						name="statusButton"
						label="体现状态"
						initialValue="1"
						radioType="button"
						options={[
							{
								label: '全部',
								value: '1',
							},
							{
								label: '未通过',
								value: '2',
							},
							{
								label: '申请中',
								value: '3',
							},
							{
								label: '已通过',
								value: '4',
							},
						]}
					/>
					<ProFormRadio.Group
						name="WithdrawalButton"
						label="体现方式"
						radioType="button"
						initialValue="1"
						options={[
							{
								label: '全部',
								value: '1',
							},
							{
								label: '支付宝',
								value: '2',
							},
							{
								label: '银行卡',
								value: '3',
							},
							{
								label: '微信',
								value: '4',
							}
						]}
					/>
				</Form>
				<span style={{position:'relative',top:'5px',marginRight:'10px'}}>搜索 :</span>
				<Search
					style={{width: '400px'}}
					placeholder="微信昵称/姓名/支付宝账号/银行卡账号"
					addonBefore={selectBefore}
					enterButton
					onSearch={(data) => {
						let item = {}
						item[custom] = data
						setInputSearch(item)
						actionRef?.current?.reload()
					}}
				/>
			</ProCard>
			<ProCard style={{marginTop: 10,}} gutter={[16, 16]}>
				<StatisticCard
					bordered
					statistic={{
						value: `${cardData.underreview_price}`,
						description: '待提现金额',
						icon: (
							<img
								style={{display: 'block', width: 60, height: 60,}}
								src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*pUkAQpefcx8AAAAAAAAAAABkARQnAQ"
								alt="icon"
							/>
						)
					}}
				/>
				<StatisticCard
					bordered
					statistic={{
						value: `${cardData.balance}`,
						description: '佣金总金额',
						icon: (
							<img
								style={{display: 'block', width: 60, height: 60,}}
								src=" https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*dr_0RKvVzVwAAAAAAAAAAABkARQnAQ"
								alt="icon"
							/>
						)
					}}
				/>
				<StatisticCard
					bordered
					statistic={{
						value: `${cardData.withdrawncash_price}`,
						description: '已提现金额',
						icon: (
							<img
								style={{display: 'block', width: 60, height: 60,}}
								src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*-jVKQJgA1UgAAAAAAAAAAABkARQnAQ"
								alt="icon"
							/>
						)
					}}
				/>
				<StatisticCard
					bordered
					statistic={{
						value: `${cardData.fail_price}`,
						description: '未提现金额',
						icon: (
							<img
								style={{display: 'block', width: 60, height: 60,}}
								src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*FPlYQoTNlBEAAAAAAAAAAABkARQnAQ"
								alt="icon"
							/>
						)
					}}
				/>
			</ProCard>
			<ProCard>
				<ProTable
					columns={columns}
					actionRef={actionRef}
					scroll={{x: 1600}}
					request={async (params = {}, sorter, filter) => {
						let {
							data,
							meta
						} = await getUserExtract({...params, ...sorter, ...filter, ...timeSearch, ...withdrawalSearch, ...withdrawalMethodSearch,...inputSearch})
						let data1 = await getTotalPrice({...params, ...timeSearch})
						setData(data1)
						return {
							data: data1,
							data,
							success: true,
							total: meta.pagination.total
						}
					}}
					rowKey="key"
					pagination={{
						showQuickJumper: true,
					}}
					search={false}
					dateFormatter="string"
					toolbar={{
						title: '提现申请',
						tooltip: '这是一个标题提示',
					}}
				/>
			</ProCard>
			{isShowEdit ?
				<EditMoudal
					visible={isShowEdit}
					setVisible={setIsShowEdit}
					data={editData}
					editRefresh={() => {
						actionRef.current?.reload()
					}}
				/>
				: null
			}
		</PageContainer>
	);
};

export default Withdraw;



